<template>
  <div class="tabs-item" v-loading="pageLoading">
    <nodata v-if="!treeData.length">
      <div>
        未创建第一个权限菜单!
        <span class="addper" @click="addFromOpen('top', 0)">添加权限</span>
      </div>
    </nodata>
    <template v-else>
      <!-- 左侧 -->
      <div class="left-side">
        <div class="btns">
          <div>
            <el-button @click="setAllExpand(open_)">{{
              open_ ? "全部展开" : "全部收起"
            }}</el-button>
          </div>
          <div style="display: flex">
            <el-upload
              ref="mYupload"
              class="upload-demo"
              action="#"
              :show-file-list="false"
              accept=".xlsx,.xls"
              :auto-upload="false"
              :limit="1"
              :multiple="false"
            >
            </el-upload>
            <el-button type="primary" @click="addFromOpen('top', 0)" plain>
              新增顶级</el-button
            >
          </div>
        </div>

        <div class="tree">
          <el-tree
            ref="tree"
            :data="treeData"
            :props="defaultProps"
            :highlight-current="true"
            default-expand-all
            :expand-on-click-node="false"
            node-key="id"
            @node-click="handleNodeClick"
          >
            <span slot-scope="{ data }">
              <span :style="data.vue_hidden == 2 ? 'opacity: .4;' : ''">{{
                data.name
              }}</span>
            </span>
          </el-tree>
        </div>
      </div>

      <!-- 右侧 -->
      <div class="right-side">
        <div class="tips">{{ checkedObj.data.name }} 详情</div>
        <el-form
          :model="formData"
          ref="formInfo"
          :rules="formRules"
          class="user-info"
          label-width="150px"
          label-position="left"
        >
          <el-form-item label="是否显示在导航栏：" prop="hidden">
            <el-radio-group v-model="formData.hidden">
              <el-radio label="1">显示</el-radio>
              <el-radio label="2">隐藏</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="名称：" prop="name">
            <el-input
              v-model="formData.name"
              placeholder="请输入权限名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="接口路径：" prop="route">
            <el-input
              v-model="formData.route"
              placeholder="请输入控制器/方法名"
            ></el-input>
          </el-form-item>
          <el-form-item label="vue-path：" prop="path">
            <el-input
              v-model="formData.path"
              placeholder="请输入前端访问路径"
            ></el-input>
          </el-form-item>
          <el-form-item label="vue-component：" prop="component">
            <el-input
              v-model="formData.component"
              placeholder="请输入前端文件路径"
            ></el-input>
          </el-form-item>
          <el-form-item label="图标：" prop="icon">
            <el-input v-model="formData.icon" placeholder="菜单图标"></el-input>
          </el-form-item>
          <el-form-item label="排序：" prop="sort">
            <el-input
              v-model="formData.sort"
              placeholder="菜单显示顺序"
            ></el-input>
          </el-form-item>
          <el-form-item label="页面功能：" v-if="!checkedObj.is_top">
            <span class="page-function" @click="funListOpen">点击查看</span>
          </el-form-item>
        </el-form>
        <div style="padding-left: 40px">
          <el-button
            type="primary"
            @click="editPermissionSubmit"
            :loading="submitBtn"
            >确认修改</el-button
          >
          <el-button
            v-if="checkedObj.is_top"
            type="primary"
            @click="addFromOpen('children', formData.id)"
            plain
            >添加子级</el-button
          >
          <el-button
            type="danger"
            @click="delPermission(formData.id, formData.name, 'menu')"
            plain
            >删 除</el-button
          >
        </div>
      </div>
    </template>

    <!-- 添加菜单弹窗 -->
    <el-dialog
      :title="menuLevelType == 'top' ? '添加顶级菜单' : '添加子级菜单'"
      :visible.sync="addMenuVisible"
      @close="addFromClose"
      :close-on-click-modal="false"
      width="460px"
    >
      <el-form
        :model="topFormData"
        ref="formAdd"
        :rules="formRules"
        class="user-info"
        label-width="150px"
        label-position="left"
      >
        <el-form-item label="是否显示在导航栏：" prop="hidden">
          <el-radio-group v-model="topFormData.hidden">
            <el-radio label="1">显示</el-radio>
            <el-radio label="2">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="名称：" prop="name">
          <el-input
            v-model="topFormData.name"
            placeholder="请输入权限名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="接口路径：" prop="route">
          <el-input
            v-model="topFormData.route"
            placeholder="请输入控制器/方法名"
          ></el-input>
        </el-form-item>
        <el-form-item label="vue-path：" prop="path">
          <el-input
            v-model="topFormData.path"
            placeholder="请输入前端访问路径"
          ></el-input>
        </el-form-item>
        <el-form-item label="vue-component：" prop="component">
          <el-input
            v-model="topFormData.component"
            placeholder="请输入前端文件路径"
          ></el-input>
        </el-form-item>
        <el-form-item label="图标：" prop="icon">
          <el-input
            v-model="topFormData.icon"
            placeholder="菜单图标"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序：" prop="sort">
          <el-input
            v-model="topFormData.sort"
            placeholder="菜单显示顺序"
          ></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="addFromClose">关闭</el-button>
        <el-button
          type="primary"
          @click="addPermissionSubmit"
          :loading="submitBtn"
          >添 加</el-button
        >
      </div>
    </el-dialog>
    <!-- 页面功能弹窗 -->
    <el-dialog
      :title="checkedObj.data.name + ' - 功能列表'"
      @close="funListClose"
      :visible.sync="pageFunctionVisible"
      width="640px"
    >
      <div class="function-main" v-if="checkedObj.data">
        <nodata v-if="checkedObj.data.operation.length < 1">
          <div>
            该页面暂无操作功能!
            <span class="addper" @click="addFunOpen('first')">添加功能</span>
          </div>
        </nodata>
        <template v-else>
          <div class="function-list">
            <div class="fun-content">
              <div
                class="item"
                :class="index == funActive ? 'active' : ''"
                v-for="(item, index) in checkedObj.data.operation"
                :key="index"
                @click="funItemClick(index)"
              >
                {{ item.name }}
              </div>
            </div>

            <div class="add-fun">
              <el-button type="primary" @click="addFunOpen('second')" plain
                >新增功能</el-button
              >
            </div>
          </div>
          <div class="function-info">
            <el-form
              :model="formFunData"
              :rules="formFunRules"
              ref="formFun"
              class="fun_form"
              label-width="100px"
              label-position="left"
            >
              <el-form-item label="功能类型：" prop="type">
                <el-radio-group
                  v-model="formFunData.type"
                  @change="radioChange"
                >
                  <el-radio label="2">操作类</el-radio>
                  <el-radio label="3">跳转类</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="功能集合：" prop="gather">
                <el-radio-group v-model="formFunData.gather">
                  <el-radio label="2">否</el-radio>
                  <el-radio label="1">是</el-radio>
                </el-radio-group>
              </el-form-item>
              <div v-if="formFunData.type == '2'">
                <el-form-item label="名称：" prop="name">
                  <el-input
                    v-model="formFunData.name"
                    placeholder="请输入权限名称"
                  ></el-input>
                </el-form-item>
                <el-form-item label="接口路径：" prop="route">
                  <el-input
                    v-model="formFunData.route"
                    placeholder="请输入控制器/方法名"
                  ></el-input>
                </el-form-item>
              </div>
              <div v-if="formFunData.type == '3'">
                <el-form-item label="关联页面：" prop="relation">
                  <el-cascader
                    v-model="formFunData.relation"
                    :options="treeData"
                    :props="cascaderDefaultProps"
                  >
                  </el-cascader>
                </el-form-item>
              </div>
              <div v-if="formFunData.gather == '1'">
                <el-form-item label="图标：" prop="icon">
                  <el-input
                    v-model="formFunData.icon"
                    placeholder="功能图标"
                  ></el-input>
                </el-form-item>
                <el-form-item label="排序：" prop="sort">
                  <el-input
                    v-model="formFunData.sort"
                    placeholder="功能显示顺序"
                  ></el-input>
                </el-form-item>
              </div>
            </el-form>
            <div>
              <el-button
                type="primary"
                @click="editFunSubmit"
                :loading="submitBtn"
                >修 改</el-button
              >
              <el-button
                type="danger"
                @click="
                  delPermission(
                    formFunData.id,
                    checkedObj.data.operation[funActive].name,
                    'fun'
                  )
                "
                plain
                >删 除
              </el-button>
            </div>
          </div>
        </template>
      </div>
    </el-dialog>
    <!-- 页面功能添加弹窗 -->
    <el-dialog
      title="功能添加"
      :visible.sync="pageFunctionAddVisible"
      width="640px"
    >
      <div class="form_fun_add">
        <el-form
          :model="formFunAddData"
          :rules="formFunRules"
          ref="formFunAdd"
          class="user-info"
          label-width="100px"
          label-position="left"
        >
          <el-form-item label="功能类型：" prop="type">
            <el-radio-group v-model="formFunAddData.type" @change="radioChange">
              <el-radio label="2">操作类</el-radio>
              <el-radio label="3">跳转类</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="功能集合：" prop="gather">
            <el-radio-group v-model="formFunAddData.gather">
              <el-radio label="2">否</el-radio>
              <el-radio label="1">是</el-radio>
            </el-radio-group>
          </el-form-item>
          <div v-if="formFunAddData.type == '2'">
            <el-form-item label="名称：" prop="name">
              <el-input
                v-model="formFunAddData.name"
                placeholder="请输入权限名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="接口路径：" prop="route">
              <el-input
                v-model="formFunAddData.route"
                placeholder="请输入控制器/方法名"
              ></el-input>
            </el-form-item>
          </div>
          <div v-if="formFunAddData.type == '3'">
            <el-form-item label="关联页面：" prop="relation">
              <el-cascader
                v-model="formFunAddData.relation"
                :options="treeData"
                :props="cascaderDefaultProps"
              >
              </el-cascader>
            </el-form-item>
          </div>
          <div v-if="formFunAddData.gather == '1'">
            <el-form-item label="图标：" prop="icon">
              <el-input
                v-model="formFunAddData.icon"
                placeholder="功能图标"
              ></el-input>
            </el-form-item>
            <el-form-item label="排序：" prop="sort">
              <el-input
                v-model="formFunAddData.sort"
                placeholder="功能显示顺序"
              ></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="pageFunctionAddVisible = false">关闭</el-button>
        <el-button type="primary" @click="addFunSubmit" :loading="submitBtn"
          >添 加</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import permissionApi from "@/api/permissionApi";
import nodata from "@/components/nodata";
export default {
  name: "",
  props: ["project_key", "proActive", "permission"],
  components: {
    nodata,
  },
  data() {
    let validateName = (rule, value, callback) => {
      if (this.pageFunctionAddVisible) {
        var form = this.formFunAddData;
      } else {
        var form = this.formFunData;
      }
      if (form.type == "2") {
        if (!form.name) {
          callback(new Error("请输入权限名称"));
        } else {
          callback();
        }
        return;
      }
      callback();
    };
    let validateRoute = (rule, value, callback) => {
      if (this.pageFunctionAddVisible) {
        var form = this.formFunAddData;
      } else {
        var form = this.formFunData;
      }
      if (form.type == "2") {
        if (!form.route) {
          callback(new Error("请输入控制器/方法名"));
        } else {
          callback();
        }
        return;
      }
      callback();
    };
    let validateRelation = (rule, value, callback) => {
      if (this.pageFunctionAddVisible) {
        var form = this.formFunAddData;
      } else {
        var form = this.formFunData;
      }
      if (form.type == "3") {
        if (form.relation.length < 1) {
          callback(new Error("请选择关联页面"));
        } else {
          callback();
        }
        return;
      }
      callback();
    };

    return {
      loading: false,
      // tree数据
      expandAll: true,
      treeData: [],
      defaultProps: {
        children: "nodes",
        label: "name",
      },
      cascaderDefaultProps: {
        children: "nodes",
        label: "name",
        value: "id",
      },
      // form数据 - 菜单类
      checkedObj: {
        is_top: true,
        data: "",
        checkedIdx: [0],
      },
      menuLevelType: "top",
      // 添加菜单类的form
      topFormData: {
        parent_id: 0,
        hidden: "1",
        name: "",
        route: "",
        path: "",
        component: "",
        icon: "",
        sort: "",
      },
      // 修改菜单类的form
      formData: {
        id: "",
        hidden: "1",
        name: "",
        route: "",
        path: "",
        component: "",
        icon: "",
        sort: "",
      },
      // 菜单类form验证规则
      formRules: {
        name: [
          { required: true, message: "请输入权限名称", trigger: "change" },
        ],
        route: [
          { required: true, message: "请输入控制器/方法名", trigger: "change" },
        ],
        path: [
          { required: true, message: "请输入前端访问路径", trigger: "change" },
        ],
        component: [
          { required: true, message: "请输入前端文件路径", trigger: "change" },
        ],
      },
      // 添加功能类的form
      formFunAddData: {
        openType: "",
        type: "2",
        gather: "2",
        name: "",
        route: "",
        // 跳转
        icon: "",
        sort: "",
        relation: [],
      },
      // 修改功能类的form
      formFunData: {
        id: "",
        type: "2",
        gather: "2",
        name: "",
        route: "",
        // 跳转
        icon: "",
        sort: "",
        relation: [],
      },
      // 功能类form验证规则
      formFunRules: {
        name: [{ required: true, validator: validateName, trigger: "change" }],
        route: [
          { required: true, validator: validateRoute, trigger: "change" },
        ],
        relation: [
          { required: true, validator: validateRelation, trigger: "change" },
        ],
      },

      // 新增菜单弹窗
      addMenuVisible: false,
      // 页面功能弹窗
      funActive: 0,
      pageFunctionVisible: false,
      // 页面功能添加弹窗
      pageFunctionAddVisible: false,

      submitBtn: false,
      open_: false, //权限列表开关
      pageLoading: false,
    };
  },
  watch: {},
  mounted() {
    this.getPermissionList();
  },
  methods: {
    // 权限列表
    getPermissionList() {
      this.pageLoading = true;
      permissionApi
        .getPermissionList()
        .then((res) => {
          console.log(res, "权限列表");
          this.pageLoading = false;
          if (res.code == 200) {
            res.data.map((item) => {
              item.nodes.map((item2) => {
                delete item2.nodes;
              });
            });
            this.treeData = res.data;
            if (res.data.length > 0) {
              this.$nextTick(() => {
                var checkedIdx = this.checkedObj.checkedIdx;
                if (checkedIdx.length == 1) {
                  var row = res.data[checkedIdx[0]];
                  this.checkedObj.is_top = true;
                } else {
                  var row = res.data[checkedIdx[0]].nodes[checkedIdx[1]];
                  this.checkedObj.is_top = false;
                }
                this.checkedObj.data = row;
                this.formData = {
                  id: row.id,
                  hidden: row.vue_hidden.toString(),
                  name: row.name,
                  route: row.route,
                  path: row.vue_path,
                  component: row.vue_component,
                  icon: row.icon ? row.icon : "",
                  sort: row.sort ? row.sort : "",
                  parent_id: row.parent_id,
                };
                // 如果方法弹窗第一次添加需加载
                if (this.formFunAddData.openType == "first") {
                  this.funListOpen();
                }
                this.$refs.tree.setCurrentKey(row.id);
              });
            }
          }
        })
        .catch((err) => {
          this.pageLoading = false;
        });
    },
    // 展开/收起tree
    setAllExpand(state) {
      var nodes = this.$refs.tree.store.nodesMap;
      for (var i in nodes) {
        nodes[i].expanded = state;
      }
      this.open_ = !this.open_;
    },
    // tree点击触发
    handleNodeClick(row, node) {
      this.checkedObj.checkedIdx = this.getTreeIdx(row, node.level);
      this.checkedObj.data = row;
      if (node.level == 1) {
        this.checkedObj.is_top = true;
      } else {
        this.checkedObj.is_top = false;
      }
      this.formData = {
        id: row.id,
        hidden: row.vue_hidden.toString(),
        name: row.name,
        route: row.route,
        path: row.vue_path,
        component: row.vue_component,
        icon: row.icon ? row.icon : "",
        sort: row.sort ? row.sort : "",
        parent_id: row.parent_id,
      };
    },
    getTreeIdx(row, level) {
      let treeData = this.treeData;
      let checkedIdx = [];
      if (level == 1) {
        treeData.map((item, index) => {
          if (row.id == item.id) {
            checkedIdx.push(index);
          }
        });
      } else {
        treeData.map((item, index) => {
          if (row.parent_id == item.id) {
            checkedIdx.push(index);
          }
        });
        treeData[checkedIdx[0]].nodes.map((item, index) => {
          if (row.id == item.id) {
            checkedIdx.push(index);
          }
        });
      }
      return checkedIdx;
    },

    // 菜单类 - 弹窗打开
    addFromOpen(type, id) {
      this.addMenuVisible = true;
      this.menuLevelType = type;
      this.topFormData.parent_id = id;
    },
    // 菜单类 - 弹窗关闭
    addFromClose() {
      this.$refs.formAdd.resetFields();
      this.addMenuVisible = false;
    },
    // 菜单类 - 表单提交
    addPermissionSubmit() {
      this.$refs.formAdd.validate((valid) => {
        if (valid) {
          var topFormData = this.topFormData;
          topFormData.type = 1;
          topFormData.meta = 1;
          this.setPermissionAdd(topFormData);
        } else {
          return false;
        }
      });
    },
    setPermissionAdd(obj) {
      this.submitBtn = true;
      permissionApi
        .setPermissionAdd(obj)
        .then((res) => {
          console.log(res, "添加权限");
          if (res.code == 200) {
            this.addMenuVisible = false;
            this.$message.success("添加成功");
            this.getPermissionList();
          } else {
            this.$message.success(res.message);
          }
          this.submitBtn = false;
        })
        .catch(() => {
          this.submitBtn = false;
        });
    },
    // 菜单类 - 修改
    editPermissionSubmit() {
      this.$refs.formInfo.validate((valid) => {
        if (valid) {
          this.submitBtn = true;
          let formData = this.formData;
          permissionApi
            .setPermissionSave({
              type: 1,
              id: formData.id,
              name: formData.name,
              route: formData.route,
              path: formData.path,
              component: formData.component,
              hidden: formData.hidden,
              icon: formData.icon,
              sort: formData.sort,
              meta: 1,
              parent_id: formData.parent_id,
            })
            .then((res) => {
              console.log(res, "setPermissionSave");
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "修改成功!",
                });
                this.checkedObj.data.hidden = formData.hidden;
                this.checkedObj.data.name = formData.name;
                this.checkedObj.data.route = formData.route;
                this.checkedObj.data.path = formData.path;
                this.checkedObj.data.component = formData.component;
                this.checkedObj.data.icon = formData.icon;
                this.checkedObj.data.sort = formData.sort;
                this.getPermissionList();
              } else {
                this.$message.error(res.message);
              }
              this.submitBtn = false;
            });
        } else {
          return false;
        }
      });
    },

    // 功能类 - 弹窗打开
    funListOpen() {
      let operation = this.checkedObj.data.operation;
      this.pageFunctionVisible = true;
      if (operation.length > 0) {
        if (operation[0].type == 2) {
          this.formFunData.name = operation[0].name;
          this.formFunData.route = operation[0].route;
        } else {
          this.formFunData.relation = [
            this.getParentId(operation[0].object_id),
            operation[0].object_id,
          ];
        }
        this.formFunData.id = operation[0].id;
        this.formFunData.type = operation[0].type.toString();
        this.formFunData.gather = operation[0].gather.toString();
        this.formFunData.icon = operation[0].icon ? operation[0].icon : "";
        this.formFunData.sort = operation[0].sort ? operation[0].sort : "";
        this.funActive = 0;
        this.formFunAddData.openType = "";
      }
    },
    funListClose() {
      this.formFunAddData.openType = "";
    },
    // 功能类 - 功能点击
    funItemClick(idx) {
      let operation = this.checkedObj.data.operation;
      this.formFunData = {
        id: operation[idx].id,
        type: operation[idx].type.toString(),
        gather: operation[idx].gather.toString(),
        relation: [
          this.getParentId(operation[idx].object_id),
          operation[idx].object_id,
        ],
        name: operation[idx].type == 2 ? operation[idx].name : "",
        route: operation[idx].type == 2 ? operation[idx].route : "",
        icon: operation[idx].icon ? operation[idx].icon : "",
        sort: operation[idx].sort ? operation[idx].sort : "",
      };
      this.funActive = idx;
    },
    getParentId(object_id) {
      var treeData = this.treeData;
      var parent_id = "";
      treeData.map((item) => {
        item.nodes.map((row) => {
          if (object_id == row.id) {
            parent_id = row.parent_id;
          }
        });
      });
      return parent_id;
    },
    // 功能类 - 功能类型点击变化
    radioChange() {
      if (this.pageFunctionAddVisible) {
        this.$refs.formFunAdd.clearValidate();
      } else {
        this.$refs.formFun.clearValidate();
      }
    },
    addFunOpen(type) {
      this.formFunAddData.openType = type;
      this.pageFunctionAddVisible = true;
    },
    // 功能类 - 新增功能
    addFunSubmit() {
      var openType = this.formFunAddData.openType;
      this.$refs.formFunAdd.validate((valid) => {
        if (valid) {
          this.submitBtn = true;
          var formFunAddData = this.formFunAddData;
          console.log(formFunAddData);
          permissionApi
            .setPermissionAdd({
              object_id:
                formFunAddData.relation.length > 0
                  ? formFunAddData.relation[1]
                  : "",
              type: formFunAddData.type,
              parent_id: this.checkedObj.data.id,
              gather: formFunAddData.gather,
              name: formFunAddData.name,
              route: formFunAddData.route,
              icon: formFunAddData.icon,
              sort: formFunAddData.sort,
            })
            .then((res) => {
              console.log(res, "setPermissionAdd");
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "添加成功!",
                });
                this.formFunAddData = {
                  openType,
                  type: "2",
                  gather: "2",
                  name: "",
                  route: "",
                  icon: "",
                  sort: "",
                  relation: [],
                };
                this.$refs.formFunAdd.clearValidate();
                this.pageFunctionAddVisible = false;
                this.getPermissionList();
              } else {
                this.$message.error(res.message);
              }
              this.submitBtn = false;
            });
        } else {
          return false;
        }
      });
    },
    // 功能类 - 修改功能
    editFunSubmit() {
      this.$refs.formFun.validate((valid) => {
        if (valid) {
          this.submitBtn = true;
          var formFunData = this.formFunData;
          permissionApi
            .setPermissionSave({
              id: formFunData.id,
              type: formFunData.type,
              object_id:
                formFunData.relation.length > 0 ? formFunData.relation[1] : "",
              gather: formFunData.gather,
              name: formFunData.name,
              route: formFunData.route,
              icon: formFunData.icon,
              sort: formFunData.sort,
            })
            .then((res) => {
              console.log(res, "setPermissionSave");
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "修改成功!",
                });
                this.getPermissionList();
              } else {
                this.$message.error(res.message);
              }
              this.submitBtn = false;
            });
        } else {
          return false;
        }
      });
    },

    // 删除权限
    delPermission(id, name, type) {
      this.$confirm(
        "你确定要删除 “" + name + "” 权限? 删除后将无法还原",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          var external = this.external;
          var project_key = this.project_key;
          permissionApi
            .setPermissionDel({
              id,
            })
            .then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                if (type == "menu") {
                  this.checkedObj.checkedIdx = [0];
                } else {
                  this.formFunAddData.openType = "first";
                }
                this.getPermissionList();
              } else {
                this.$message.error(res.message);
              }
            });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" src="./index.scss" scoped></style>
